<template>
  <div class="container">
    <!-- 查询条件和按钮 -->
    <el-card class="box-card">
      <el-form ref="searchForm" :model="searchForm" inline class="small-form">
        <el-form-item label="日期范围">
          <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="searchForm.start" placeholder="开始日期" size="small"></el-date-picker>
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="searchForm.end" placeholder="结束日期" size="small"></el-date-picker>
          <!-- <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          ></el-date-picker> -->
        </el-form-item>
        <el-form-item label="偏爱优先级">
          <el-select v-model="searchForm.priority" placeholder="请选择" size="small">
            <el-option label="高" value="高"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="低" value="低"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="searchForm.jobTitle" placeholder="请输入岗位名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="面试轮次">
          <el-input v-model="searchForm.interviewRounds" placeholder="请输入面试伦次" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
          <el-button @click="handleReset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 今日和近期面试建议按钮 -->
    <el-card class="box-card" style="margin-top: 10px;">
      <el-button type="primary" @click="showTodaySuggestion" size="small">今日面试建议</el-button>
      <el-button type="primary" @click="showUpcomingSuggestion" size="small">近期面试建议</el-button>
    </el-card>

    <!-- 建议卡片 -->
    <el-dialog :visible.sync="todaySuggestionDialogVisible" title="今日面试建议" width="50%">
      <p>{{ todaySuggestion }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="todaySuggestionDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="upcomingSuggestionDialogVisible" title="近期面试建议" width="50%">
      <p>{{ upcomingSuggestion }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upcomingSuggestionDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 简历投递记录表 -->
    <el-card class="box-card" style="margin-top: 10px;">
      <el-table
        :data="sortedData"
        style="width: 100%"
        size="small"
        @sort-change="handleSortChange"
      >
        <el-table-column prop="company" label="公司" :min-width="120"></el-table-column>
        <el-table-column prop="jobTitle" label="岗位名称" :min-width="120"></el-table-column>
        <el-table-column prop="website" label="面试链接" :min-width="150">
          <template slot-scope="scope">
            <a :href="scope.row.website" target="_blank">{{ scope.row.website }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="start" label="开始日期" :min-width="100" sortable></el-table-column>
        <el-table-column prop="startTime" label="开始时间" :min-width="120" sortable></el-table-column>
        <el-table-column prop="intent" label="偏爱级" :min-width="100" sortable></el-table-column>
        <el-table-column label="备注" :min-width="150">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="200"
              trigger="click"
              :content="scope.row.notes"
            >
              <el-button slot="reference" type="text" size="small">{{ scope.row.notes ? '查看备注' : '无备注' }}</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
      background
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 10px;"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        start: '',
        end:'',
        priority: '',
        jobTitle: '',
        interviewRounds:''
      },
      tableData: [          {
            jobTitle: '面试',
          startDate: '2024-05-17',
          startTime: '14:00',
          endTime: '12:00',
          company: '公司A',
          intent: '高',
          interviewLink:'aigc.vivo.com'
          },
          {
            jobTitle: '面试',
          startDate: '2024-05-21',
          startTime: '10:00',
          endTime: '12:00',
          company: '公司A',
          intent: '高',
          interviewLink:'www.pku.edu.cn'
          },],
      currentPage: 1,
      pageSize: 5,
      total: 2,
      todaySuggestionDialogVisible: false,
      todaySuggestion: '',
      upcomingSuggestionDialogVisible: false,
      upcomingSuggestion: '',
      sortOrders: [],
    };
  },
  computed: {
    sortedData() {
      let data = [...this.tableData];
      this.sortOrders.forEach(order => {
        data = data.sort((a, b) => {
          let result = 0;
          if (order.order === 'ascending') {
            result = a[order.prop] > b[order.prop] ? 1 : -1;
          } else if (order.order === 'descending') {
            result = a[order.prop] < b[order.prop] ? 1 : -1;
          }
          return result;
        });
      });
      return data;
    }
  },
  methods: {
    handleSearch() {
      // 调用后端API进行查询
      const params = {
        start: this.searchForm.start,
        end: this.searchForm.end,
        intent: this.searchForm.priority,
        jobTitle: this.searchForm.jobTitle,
        interviewRounds: this.searchForm.interviewRounds,
        currentPage: this.currentPage,
        size: this.pageSize
      };
      this.$request.get('/info/searchInterview', { params })
        .then(response => {
          this.tableData = response.data?.list;
          this.total = response.data.total;
        })
        .catch(error => {
          console.error('查询失败', error);
          this.$message.error('查询失败');
        });
    },
    handleReset() {
      this.searchForm.start = '';
      this.searchForm.end = '';
      this.searchForm.priority = '';
      this.searchForm.jobTitle = '';
      this.searchForm.interviewRounds = '';
    },
    showTodaySuggestion() {
      // 调用后端API获取AI生成的今日面试建议
      this.$request.get('/info/todaySuggestion')
        .then(response => {
          this.todaySuggestion = response.data;
          this.todaySuggestionDialogVisible = true;
        })
        .catch(error => {
          console.error('获取今日建议失败', error);
          this.$message.error('获取今日建议失败');
        });
    },
    showUpcomingSuggestion() {
      // 调用后端API获取AI生成的近期面试建议
      this.$request.get('/info/upcomingSuggestion')
        .then(response => {
          this.upcomingSuggestion = response.data;
          this.upcomingSuggestionDialogVisible = true;
        })
        .catch(error => {
          console.error('获取近期建议失败', error);
          this.$message.error('获取近期建议失败');
        });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.handleSearch();
    },
    handleSortChange({ prop, order }) {
      const existingSort = this.sortOrders.find(sort => sort.prop === prop);
      if (existingSort) {
        existingSort.order = order;
      } else {
        this.sortOrders.push({ prop, order });
      }
      this.sortOrders = this.sortOrders.filter(sort => sort.order);
    }
  },
  created() {
    this.handleSearch();
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
  background: #f5f5f5;
  font-size: 14px; /* 缩小字体 */
  overflow-x: hidden; /* 防止水平滚动条 */
}

.small-form .el-form-item {
  margin-bottom: 10px; /* 缩小表单项的间距 */
}

.el-dialog {
  max-width: 600px;
}

.dialog-footer {
  text-align: right;
}

.el-table .el-table-column--small .cell {
  font-size: 14px; /* 缩小表格字体 */
}

.el-button--small {
  padding: 5px 10px; /* 缩小按钮的内边距 */
}

.el-table th {
  background-color: #f2f2f2; /* 设置表格标题行的浅灰色背景 */
  border-radius: 8px; /* 设置表格标题行圆角 */
  padding: 10px; /* 设置表格标题行内边距 */
}

.el-table th::before {
  content: ''; /* 清除表格标题行的默认边框 */
}

.el-pagination {
  margin-top: 10px;
}
</style>